import 'package:flex_demo/widgets/section_title.dart';
import 'package:flutter/material.dart';
import 'layout_card.dart';

class FlexDemo extends StatelessWidget {
  const FlexDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SectionTitle(
          title: 'Expanded vs Flexible',
          subtitle: '替代LinearLayout的weight属性',
          icon: Icons.compare_arrows,
        ),
        _buildComparisonInfo(),
        const SectionTitle(
          title: '1. Expanded 权重布局',
          subtitle: '强制填满可用空间',
          icon: Icons.view_agenda,
        ),
        LayoutCard(
          title: '权重比例 1:2:3',
          height: 80,
          child: _buildExpandedRow([1, 2, 3]),
        ),
        const SizedBox(height: 12),
        LayoutCard(
            title: '权重比例 2:1:1',
            height: 80,
            child: _buildExpandedRow([2, 1, 1])),
        const SizedBox(height: 12),
        LayoutCard(
            title: '混合布局 (Expanded + 固定宽度)',
            height: 80,
            child: _buildMixedLayout()),
        const SizedBox(height: 12),
        const SectionTitle(
            title: '2. Flexible 灵活布局',
            subtitle: '自适应内容大小',
            icon: Icons.view_compact),
        LayoutCard(
            title: 'Flexible(fit: FlexFit.loose)',
            height: 80,
            child: _buildFlexibleLooseRow()),
        const SizedBox(height: 12),
        LayoutCard(
            title: 'Flexible(fit: FlexFit.tight)',
            height: 80,
            child: _buildFlexibleTightRow()),
        const SizedBox(height: 12),
        const SectionTitle(
          title: '3. Column中的权重布局',
          subtitle: '垂直方向权重分配',
          icon: Icons.view_column,
        ),
        LayoutCard(
          height: 200,
          child: _buildWeightedColumn(),
        ),
        const SectionTitle(
          title: '4. 复杂布局示例',
          subtitle: '组合使用Expanded和Flexible',
          icon: Icons.dashboard,
        ),
        LayoutCard(
          height: 200,
          child: _buildComplexLayout(),
        ),
        const SizedBox(height: 32),
        _buildFooter(),
      ],
    );
  }

  Widget _buildComparisonInfo() {
    return const Card(
      child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Android ↔ Flutter 对比',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
              ),
              SizedBox(height: 8),
              Row(
                children: [
                  Expanded(
                    child: Text(
                      'Android属性:\nlayout_weight',
                      style: TextStyle(fontWeight: FontWeight.w500),
                    ),
                  ),
                  Icon(Icons.arrow_forward, size: 20),
                  Expanded(
                      child: Text(
                        'Flutter组件:\nExpanded / Flexible',
                        style: TextStyle(fontWeight: FontWeight.w500),
                      ))
                ],
              ),
              SizedBox(height: 12),
              Text(
                '• Expanded = 强制填充可用空间 (类似 weight + match_parent)\n'
                    '• Flexible = 灵活填充方式 (可控制是否填满剩余空间)',
                style: TextStyle(height: 1.5),
              ),
            ],
          )),
    );
  }

  Widget _buildExpandedRow(List<int> weights) {
    return Row(
      children: [
        for (int i = 0; i < weights.length; i++)
          Expanded(
            flex: weights[i],
            child: Container(
              decoration: BoxDecoration(
                color: _getColor(i),
                border: Border.all(color: Colors.white, width: 1),
              ),
              alignment: Alignment.center,
              child: Text(
                '权重:${weights[i]}',
                style: const TextStyle(
                    color: Colors.white, fontWeight: FontWeight.bold),
              ),
            ),
          ),
      ],
    );
  }

  Widget _buildMixedLayout() {
    return Row(
      children: [
        //固定宽度
        Container(
          width: 80,
          color: Colors.blue,
          alignment: Alignment.center,
          child: const Text('固定宽度', style: TextStyle(color: Colors.white)),
        ),
        // 权重1
        Expanded(
            flex: 2,
            child: Container(
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text(
                '权重2',
                style: TextStyle(color: Colors.white),
              ),
            )),
        // 权重2
        Expanded(
          flex: 3,
          child: Container(
            color: Colors.orange,
            alignment: Alignment.center,
            child: const Text('权重 3', style: TextStyle(color: Colors.white)),
          ),
        ),
      ],
    );
  }

  Widget _buildFlexibleLooseRow() {
    return Row(
      children: [
        Flexible(
            flex: 1,
            fit: FlexFit.loose,
            child: Container(
              color: Colors.purple,
              alignment: Alignment.center,
              child: const Text(
                  '自适应宽度', style: TextStyle(color: Colors.white)),
            )),
        Flexible(
            flex: 2,
            fit: FlexFit.loose,
            child: Container(
              color: Colors.teal,
              alignment: Alignment.center,
              child:
              const Text(
                  '更长的文本内容', style: TextStyle(color: Colors.white)),
            )),
        Flexible(
          flex: 1,
          fit: FlexFit.loose,
          child: Container(
            constraints: const BoxConstraints(maxWidth: 60),
            color: Colors.deepOrange,
            alignment: Alignment.center,
            child: const Text('最大宽度限制',
                style: TextStyle(color: Colors.white, fontSize: 12)),
          ),
        ),
      ],
    );
  }

  Widget _buildFlexibleTightRow() {
    return Row(
      children: [
        Flexible(
            flex: 1,
            fit: FlexFit.tight,
            child: Container(
              color: Colors.blue,
              alignment: Alignment.center,
              child: const Text(
                'FlexFit.tight',
                style: TextStyle(color: Colors.white),
              ),
            )),
        Flexible(
            flex: 1,
            fit: FlexFit.tight,
            child: Container(
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text(
                '等同于Expanded',
                style: TextStyle(color: Colors.white),
              ),
            )),
        Flexible(
            flex: 1,
            fit: FlexFit.tight,
            child: Container(
              color: Colors.orange,
              alignment: Alignment.center,
              child: const Text(
                '权重1:1:1',
                style: TextStyle(color: Colors.white),
              ),
            )),
      ],
    );
  }

  Widget _buildWeightedColumn() {
    return Column(
      children: [
        Expanded(
            flex: 1,
            child: Container(
              color: Colors.blue,
              alignment: Alignment.center,
              child: const Text(
                  '顶部区域 (权重1)', style: TextStyle(color: Colors.white)),
            )),
        Expanded(
          flex: 2,
          child: Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text(
                '中间区域 (权重2)', style: TextStyle(color: Colors.white)),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.orange,
            alignment: Alignment.center,
            child: const Text(
                '底部区域 (权重1)', style: TextStyle(color: Colors.white)),
          ),
        ),
      ],
    );
  }

  Widget _buildComplexLayout() {
    return Column(
        children: [
        // 顶部行
        Expanded(
        flex: 1,
        child: Row(
          children: [
            // 左侧固定区域
            Container(
              width: 80,
              color: Colors.blueGrey,
              alignment: Alignment.center,
              child: const Text('固定',style: TextStyle(color: Colors.white),),
            ), // 中间自适应区域
            const Expanded(
              flex: 2,
              child: Padding(
                padding: EdgeInsets.all(8.0),
                child: Placeholder(),
              ),
            ),
            // 右侧权重区域
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.deepPurple[300],
                alignment: Alignment.center,
                child: const Text('权重1', style: TextStyle(color: Colors.white)),
              ),
            ),
          ],
        )),
          // 底部行
          Expanded(
            flex: 2,
            child: Row(
              children: [
                // 左侧权重区域
                Expanded(
                  flex: 1,
                  child: Container(
                    color: Colors.teal,
                    alignment: Alignment.center,
                    child: const Text('左侧区域', style: TextStyle(color: Colors.white)),
                  ),
                ),
                // 中间Flexible区域
                Flexible(
                  flex: 2,
                  fit: FlexFit.loose,
                  child: Container(
                    margin: const EdgeInsets.all(8),
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: Colors.amber[700],
                      borderRadius: BorderRadius.circular(8),
                    ),
                    alignment: Alignment.center,
                    child: const Text('自适应区域\n(Flexible loose)',
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.white)),
                  ),
                ),
                // 右侧固定区域
                Container(
                  width: 60,
                  color: Colors.redAccent,
                  alignment: Alignment.center,
                  child: const Text('固定', style: TextStyle(color: Colors.white)),
                ),
              ],
            ),
          ),

        ],
    );
  }

  Widget _buildFooter() {
    return  Card(
      color: Colors.blueGrey[50],
      child:const Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '关键要点总结',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
            ),
            SizedBox(height: 8),
            Text('• Expanded强制填满可用空间，类似Android的weight+match_parent'),
            Text('• Flexible提供更灵活的空间分配方式'),
            Text('• FlexFit.tight等同于Expanded (强制拉伸)'),
            Text('• FlexFit.loose按内容自适应 (不强制拉伸)'),
            Text('• 可以组合使用固定尺寸、Expanded和Flexible创建复杂布局'),
          ],
        ),
      ),
    );
  }

  Color _getColor(int index) {
    final colors = [
      Colors.blue,
      Colors.green,
      Colors.orange,
      Colors.purple,
      Colors.teal,
      Colors.red,
    ];
    return colors[index % colors.length];
  }
}
